<template>
  <div class="page-box">
    <div class="login-container">
      <div class="login-box">
        <n-form ref="formRef" :model="modelRef" :rules="rules">
          <n-form-item path="account" label="">
            <n-input
              class="login-account login-input"
              v-model:value="modelRef.account"
              @keydown.enter.prevent
              placeholder="请输入账号"
            />
          </n-form-item>
          <n-form-item path="password" label="">
            <n-input
              class="login-account login-input"
              v-model:value="modelRef.password"
              type="password"
              @keydown.enter.prevent
              placeholder="请输入密码"
            />
          </n-form-item>
          <div class="login-btn-container">
            <ClipPath :isActive="isCanLogin" :borderNum="2" @click="login">
              <div class="login-button">登录</div>
            </ClipPath>
          </div>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { $$, $ref, ReactiveVariable } from "vue/macros";
import { FormInst, FormItemRule, useMessage, FormRules } from "naive-ui";
import { useRouter } from "vue-router";
import type { Router } from "vue-router";
import { ClipPath } from "@/components";

const route: Router = useRouter();

onMounted(async () => {});

interface ModelType {
  account: string;
  password: string;
}

const formRef = ref<FormInst | null>(null);
const message = useMessage();
const modelRef: ReactiveVariable<ModelType> = $ref<ModelType>({
  account: "",
  password: "",
});

const rules: FormRules = {
  account: [
    {
      required: true,
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error("请输入账号");
        } else if (!/^\d*$/.test(value)) {
          return new Error("账号格式有误!");
        }
        return true;
      },
      trigger: ["input", "blur"],
    },
  ],
  password: [
    {
      required: true,
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error("请输入密码");
        }
        return true;
      },
      trigger: ["input", "blur"],
    },
  ],
};

function login(event: MouseEvent) {
  handleValidateButtonClick(event)
    .then(() => {
      route.replace("/");
    })
    .catch((error) => {
      console.log(error);
      message.error("验证失败");
    });
}

function handleValidateButtonClick(e: MouseEvent): Promise<any> {
  e.preventDefault();
  return new Promise((resolve: (...arg: any) => void, reject) => {
    formRef.value?.validate((errors) => {
      if (!errors) {
        resolve();
      } else {
        reject(errors);
      }
    });
  });
}

// 动态展示登录按钮是否可用
let isCanLogin = $ref(false);
watch(modelRef, (newVal) => {
  if (newVal.account && newVal.password) {
    isCanLogin = true;
  } else {
    isCanLogin && (isCanLogin = false);
  }
});
</script>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    display: flex;
    margin: auto;
    width: 800px;
    justify-content: center;
    align-items: center;
    background: rgb(74, 74, 74);
    padding: 20px 0 0;
    .login-input {
      width: 500px;
    }

    .login-btn-container {
      margin-bottom: 20px;
      width: 500px;
      height: 50px;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
    }
    .login-button {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 1s;
    }
  }
}
</style>
